<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useConfirmPasswordValidator } from '../../../utils/formValidation.js';
import { modifyPassword } from '@/server/api/biz.js';
import ChangeEmail from '../components/ChangeEmail.vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const passwordVisible = ref(false); // 重置密码弹窗
const mailVisible = ref(false); // 重置密码弹窗
const passwordFormRef = ref(null);
const email = ref(null);
const isSuccess = ref(false);
const form = reactive({
  oldPassword: '',
  password: '',
  confirmPassword: '',
});
const mailForm = ref({
  email: '',
  verifyCode: '',
});

const title = ref('');
const text = ref('');
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {},
  },
});
const router = useRouter();
const rules = {
  oldPassword: [{ required: true, message: t('om.Pleaseenteroldpassword'), trigger: 'blur' }],
  password: [
    { required: true, message: t('om.Pleaseenternewpassword'), trigger: 'blur' },
    { min: 6, message: t('mall.password_min_length', { num: 6 }), trigger: 'blur' },
  ],
  confirmPassword: useConfirmPasswordValidator(form),
};

// 显示密码弹窗
const showPasswordDialog = () => {
  passwordVisible.value = true;
};

// 更改邮箱弹窗
const showMailDialog = () => {
  mailVisible.value = true;
  email.value.changeType(props.userInfo);
};

const open = () => {
  mailVisible.value = true;
};

const close = () => {
  mailVisible.value = false;
};

// 提交表单
const submitForm = () => {
  passwordFormRef.value.validate((valid) => {
    if (valid) {
      console.log('submit!');
      changePassword();
    } else {
      return false;
    }
  });
};

/**
 * 修改密码
 */
const changePassword = () => {
  modifyPassword({
    oldPassword: form.oldPassword,
    newPassword: form.password,
  }).then((res) => {
    if (res.code !== 200) {
      ElMessage({
        message: res.msg,
        type: 'error',
      });
      return;
    }
    passwordVisible.value = false;
    isSuccess.value = true;
    title.value = t('mall.password_change');
    text.value = t('mall.password_change_success');
  });
};

const confirmJump = () => {
  window.localStorage.removeItem('loginIfo');
  window.localStorage.removeItem('userInfo');
  router.push({ path: '/login' });
  isSuccess.value = false;
};

const openConfirm = () => {
  isSuccess.value = true;
  title.value = t('mall.email_change');
  text.value = t('mall.email_change_success');
};
</script>
<template>
  <div class="setting">
    <el-row class="row-item">
      <el-col :span="3">
        <span class="desc">{{ $t('om.Loginpassword') }}</span>
      </el-col>
      <el-col :span="5">
        <span class="desc">************</span>
      </el-col>
      <el-col :span="4">
        <el-link type="primary" @click="showPasswordDialog"> {{ $t('om.ResetPassword') }} </el-link>
      </el-col>
    </el-row>
    <el-row class="row-item">
      <el-col :span="3">
        <span class="desc">{{ $t('om.emailaddress') }}</span>
      </el-col>
      <el-col :span="5">
        <span class="desc">{{ props.userInfo.email }}</span>
      </el-col>
      <el-col :span="4">
        <el-link type="primary" @click="showMailDialog"> {{ $t('om.ChangeMailbox') }}</el-link>
      </el-col>
    </el-row>

    <!-- 重置密码弹窗 -->
    <el-dialog v-model="passwordVisible" :title="$t('om.ResetPassword')" width="390px" center>
      <el-form
        :model="form"
        :rules="rules"
        ref="passwordFormRef"
        label-width="100px"
        hide-required-asterisk
        label-position="top"
      >
        <el-form-item prop="oldPassword">
          <el-input
            v-model="form.oldPassword"
            show-password
            clearable
            :placeholder="$t('om.Pleaseenteroldpassword')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            show-password
            clearable
            :placeholder="$t('om.Pleaseenternewpassword')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            show-password
            clearable
            :placeholder="$t('om.newpasswordtoconfirm')"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm()">{{ $t('om.Submit') }}</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="isSuccess" width="390px" center>
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </div>
      </template>
      <div>{{ text }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmJump">{{ $t('smt.Define') }}</el-button>
        </span>
      </template>
    </el-dialog>

    <ChangeEmail
      v-model="mailVisible"
      :form="props.userInfo"
      :title="$t('om.OldMailboxVerification')"
      type="1"
      ref="email"
      @close="close"
      @open="open"
      @openConfirm="openConfirm"
    ></ChangeEmail>
  </div>
</template>
<style scoped lang="scss">
.row-item {
  padding-top: 32px;
  .desc {
    color: #383838;
    font-size: 16px;
  }
}
</style>
